<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-30 18:46:31
-->
<template>
  <DvBorderBox12>
    <div class="right">
      <div style="color: aqua; font-size: 12px">
        {{ activeIndex === '1' ? '门店销售排行' : '门店访问排行' }}
      </div>
      <div class="list" v-for="item in orderRank" :key="item.no">
        <span style="font-style: italic">{{ item.no }}</span>
        <span style="flex: 1; margin-left: 5px">{{ item.name }}</span>
        <span>{{ item.count }}</span>
      </div>
    </div>
  </DvBorderBox12>
</template>

<script lang="ts" setup>
import { useEchartsStore } from '@/stores/echarts'
import { computed } from 'vue'
import { BorderBox12 as DvBorderBox12 } from '@kjgl77/datav-vue3'

const props = defineProps<{
  activeIndex: string
}>()

const echartsStore = useEchartsStore()

const orderRank = computed(() => {
  return echartsStore.echartsData.orderRank
})
</script>

<script lang="ts">
export default {
  name: 'MiddleRight',
}
</script>

<style lang="scss" scoped>
.list {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.right {
  height: 160px;
  padding: 10px;
}
</style>
